<template>
    <div>
        <Card class="search" shadow>
            <Input prefix="ios-contact" placeholder="Enter name" style="width: auto"/>
        </Card>
        <Card shadow>
            <Row>
                <Col span="20">
                    <div class="tb-header">
                        <RefreshButton :refreshList="getTableData"></RefreshButton>
                        <Button type="primary" size="small" icon="md-add" style="margin-right: 5px" @click="add">新增
                        </Button>
                    </div>

                    <Table :height="400" size="small" :columns="columns" :data="tableData" @on-row-click="onRow"
                           highlight-row>
                        <template slot-scope="{ row, index }" slot="action">
                            <Button disabled type="primary" size="small" style="margin-right: 5px">编辑</Button>
                            <Button disabled type="error" size="small" style="margin-right: 5px">删除</Button>
                        </template>
                    </Table>

                    <Pagination
                            ref="pagination"
                            size="small"
                            :sizer="true"
                            :page.sync="listQuery.pageNumber"
                            :rows.sync="listQuery.pageSize"
                            :total="total"
                            @on-change="getTableData"/>
                </Col>
                <Col span="4">
                    <div class="tb-header">
                        <RefreshButton :refreshList="getTreeData"></RefreshButton>
                        <Button :icon="isExpand?'ios-remove-circle-outline':'ios-add-circle-outline'" type="info"
                                @click="openOrCloseTree" size="small" style="margin-right: 5px">
                            {{isExpand?'关闭':'展开'}}
                        </Button>
                        <Button type="primary" @click="saveTree" size="small" style="margin-right: 5px">保存</Button>
                    </div>

                    <Tree :data="treeData" ref="tree" show-checkbox style="border: 1px dotted #e8eaec"></Tree>
                </Col>
            </Row>
        </Card>
    </div>
</template>

<script>
    import {findPage, findListByRoleId, saveTree, permissionTree} from '@/api/role';
    import Pagination from '../components/Pagination' // 分页插件
    import RefreshButton from '../components/RefreshButton' // 分页插件

    export default {
        name: "Role",
        components: {
            Pagination, RefreshButton
        },
        data() {
            return {
                columns: [
                    {
                        title: '编码',
                        key: 'code'
                    },
                    {
                        title: '名称',
                        key: 'roleName'
                    },
                    {
                        title: '描述',
                        key: 'description'
                    },
                    {
                        title: '状态',
                        key: 'status',
                        render: (h, params) => {
                            return h('span', params.row.status == 0 ? '禁用' : '启用')
                        }
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 200,
                        align: 'center'
                    }
                ],
                tableData: [],
                listQuery: {
                    pageNumber: 1,
                    pageSize: 10
                },
                total: 0,
                treeData: [],
                isExpand: false,
                selectedRoleId: ""
            }
        },
        created() {
            this.getTableData();
            this.getTreeData();
        },
        methods: {
            async getTableData() {
                this.tableData = [];
                this.total = 0;
                let params = this.listQuery
                let res = await findPage(params);
                if (res.success) {
                    this.tableData = res.result.records;
                    this.total = res.result.total;
                }
            },
            async getTreeData() {
                let isExpand = this.isExpand;
                this.treeData = [];
                let params = {name: this.listQuery.name}
                let res = await permissionTree(params);
                if (res.success) {
                    this.treeData = res.result.map(it => {
                        it.title = it.name
                        it.expand = isExpand
                        if (it.children) {
                            this.sub(it.children, isExpand)
                        }
                        return it;
                    });
                }
            },
            sub(child, isExpand) {
                if (child) {
                    child.map(it => {
                        it.title = it.name
                        it.expand = isExpand
                        this.sub(it.children)
                        return it;
                    });
                }
            },
            //展开或关闭
            openOrCloseTree() {
                this.isExpand = !this.isExpand;
                this.getTreeData(this.isExpand);
            },
            async saveTree() {
                if (!this.selectedRoleId) {
                    this.$layer.msg("请选择一个角色", {icon: 1, time: 3});
                    return
                }
                let checkedNodes = this.$refs.tree.getCheckedAndIndeterminateNodes();
                let data = [];
                checkedNodes.map(it => {
                    data.push({roleId: this.selectedRoleId, permissionId: it.id});
                })
                let res = await saveTree(data);
                if (res.success) {
                    this.$layer.msg(res.message, {icon: 1, time: 3});
                }
            },
            add() {

            },
            // 点击角色，选中资源树
            async onRow(row) {
                this.selectedRoleId = row.id;
                let params = {roleId: row.id};
                let res = await findListByRoleId(params);
                let permissionIds = res.result.map(it => it.permissionId);
                this.treeData.map(it => {
                    it.expand = false
                    it.checked = false
                    if ((!it.children || it.children.length==0) && permissionIds.indexOf(it.id) > -1) {
                        it.checked = true
                    }
                    if(permissionIds.indexOf(it.id) > -1){
                        it.expand = true
                    }
                    if (it.children) {
                        this.subTree(it.children, permissionIds)
                    }
                    return it;
                });
            },
            subTree(child, permissionIds) {
                if (child) {
                    child.map(it => {
                        it.expand = false
                        it.checked = false
                        if ((!it.children || it.children.length==0) && permissionIds.indexOf(it.id) > -1) {
                            it.checked = true
                        }
                        if(permissionIds.indexOf(it.id) > -1){
                            it.expand = true
                        }
                        if (it.children) {
                            this.subTree(it.children, permissionIds)
                        }
                        return it;
                    });
                }
            }
        }
    }
</script>

<style scoped>

</style>
